@charset "utf-8";
/* CSS Document */

/* 边距、补白和边界宽度都设置为0，当有溢出的时候设置为自动*/
body {
	margin:0;
	border:0;             
	padding:0;
	font-family:arial, verdana, sans-serif;
	overflow:auto;
	background:#e9e4ce;
}
a { 
	text-decoration:none;
	color:#000;
}
* {
	position:none;}
/*margin-top:-45px的用意是：因为图片是经过ps处理过的，其羽化太多，故使其向上平移45个像素。
position:relative的用意是：便于容器内部的绝对定位*/
.content {
	width:1280px;
	height:800px;
	background:url(../images/background2.jpg) no-repeat;
	margin:0 auto;
	margin-top:-45px;
}
/*position:absolute是绝对定位，离顶部的高度是166px，离左边的具体是166px*/

/******************************************实现右上方的两个小标签***********************************/
#our_label{
	width:232px;
	position:fixed;
	margin:0;
	padding:0;
	top:0;
	right:100px;
	list-style: none;
    z-index:999999;
}
/*其属性设置为fixe，他将会跟着滚动条一起运动*/
#our_label li {
    width: 108px;
    display:inline;
    float:left;    
}
#our_label a {
	width:116px;
	height:120px;
	display: block;
    float:none;
	text-decoration:none;
	text-align:center;
}
/*display设置为block可以使鼠标经过那一块的时候，都会有链接*/
.about_us a{background:url(../images/about_us.png) no-repeat;}
.contact_us a{background:url(../images/contact_us.png) no-repeat;}
/******************************************实现右上方的两个小标签***********************************/
.navigation {
	margin-top:60px;
	margin-left:30px;
}
.nav {
	margin-left:10px;
	height:96px;
	width:620px;
	background:url(../images/button_base.png) no-repeat bottom;
}

/*下面我用到的是float：right而不是left，为的是更好的控制li的排列*/
.nav a,.nav_name li {
	margin-right:15px;
	float:right;
	width:86px;
	height:86px;
}
/*a:hover是伪类，当鼠标停留或者经过nav的时候，图片移到有色图案。因为鼠标经过能够点亮的那几张图片，我用的是两张一样的图片合成的
86*86的图片我合成为172*86的左亮右黑白的图片，把这个图片作为背景放置在86*86的容器内，鼠标没有经过时显示的是黑白的，当鼠标经过的时候，
利用background—position这个属性使背景向左平移86px，从而达到目的*/
.nav a:hover,.nav a:active { background-position:0 0;}
.link { background:url(../images/link_2p.png) -86px 0;}
.album { background:url(../images/album_2p.png) -86px 0; }
.bulletin { background:url(../images/bulletin_2p.png) -86px 0; }
.bbs { background:url(../images/chat_2p.png) }
.contact { background:url(../images/contact_2p.png) -86px 0; }
.home { background:url(../images/home_2p.png) -86px 0; }
/*没有把nav和nav_name合并到一起的原因是，我们想当鼠标经过图片时，他们所对应的名字将会同时出现，这就要求把而这分开放置*/
.nav_name {
	margin-left:-25px;
	height:37px;
	width:660px;
}
.nav_name li {
	list-style:none;
	text-align:center;
	height:40px;
}
.nav_name img { display:none;}
/****************************************navagation***********************************************/
.sub_nav { margin-top:7px;}
.sub_nav_ul {
	background:url(../images/bbs_sub_nav_bg.jpg) repeat-x;
	height:32px;
	width:1200px;
	font-size:17px;
	font-family:"宋体";
	margin-left:28px;
}
.sub_nav_ul li { 
	float:left;
	height:32px;
	line-height:32px;
	margin-left:10px;
	width:60px;
	text-align:center;
	border-right:solid 2px #CCC;
	list-style:none;
}
.sub_nav_ul li:hover { 
	font-size:19px;
	color:#F63;
	font-weight:bold;
	cursor:pointer;
}
.input_box {
	margin-left:40px;
}
.input_box span{ color:#603;}
.show_main {
	width:1200px;
	height:600px;
	background:#FC9;
	border:2px solid #666;
	margin-left:41px;
}
.block { display: block;}
.unblock { display: none;}